<%--
  Created by IntelliJ IDEA.
  User: ${USER}
  Date: ${DATE}
  Time: ${TIME}
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isErrorPage="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<base href="<%= basePath %>"/>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>账户明细</title>

    <link href="static/business/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="static/business/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
    <link href="static/business/css/personal.css" rel="stylesheet" type="text/css">
    <link href="static/business/css/wallet.css" rel="stylesheet" type="text/css">
    <script src="static/business/AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="static/business/AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>

</head>

<body>
<!--头 -->
<header>
    <jsp:include page="header.jsp"/>
</header>

<div class="nav-table"></div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账单明细</strong> / <small>Electronic&nbsp;bill</small>
                </div>
            </div>
            <hr>
            <div class="finance">
                <div class="financeText">
                    <p>可用余额:<span>¥${onlineUser.customerBalance}.00</span></p>
                    <p>账户状态:<span>有效</span></p>
                    <a href="safety.jsp">安全中心：保护账户资产安全</a>
                </div>
            </div>

            <!--交易时间	-->

            <div class="order-time">
                <label class="form-label">交易时间：</label>
                <div class="show-input">
                    <select class="am-selected" data-am-selected>
                        <option value="today">今天</option>
                        <option value="sevenDays" selected="">最近一周</option>
                        <option value="oneMonth">最近一个月</option>
                        <option value="threeMonths">最近三个月</option>
                        <option class="date-trigger">自定义时间</option>
                    </select>
                </div>
                <div class="clear"></div>
            </div>

            <div class="walletList">

                <div class="walletTitle">
                    <li class="time">创建时间</li>
                    <li class="name">详情</li>
                    <li class="amount">单据号</li>
                    <li class="balance">金额</li>
                </div>
                <div class="clear"></div>
                <div class="walletCont">
                    <c:forEach var="bl" items="${balances}">
                        <li class="cost">
                            <div class="time">
                                <p>
                                </p>
                                <p class="text-muted">
                                        ${bl.createTime}
                                </p>
                            </div>
                            <div class="title name">
                                <p class="content">
                                        ${bl.changeDesc}
                                </p>
                            </div>

                            <div class="amount">
                                <span class="amount-pay">${bl.sourceSn}</span>
                            </div>

                            <div class="balance">
                                <span>金额：</span><em>${bl.amount}</em>
                            </div>
                        </li>
                    </c:forEach>
                </div>

                <!--分页-->
                <ul class="am-pagination am-pagination-right">
                    <li class="am-disabled"><a href="#">&laquo;</a></li>
                    <li class="am-active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>

            </div>

        </div>
        <!--底部-->
        <div class="footer"></div>
    </div>
    <aside class="menu"></aside>
</div>
</body>
<script>
    $(function () {
        $(".nav-table").load("<%= basePath %>static/business/person/nav.jsp");
        $("div.footer").load("<%= basePath %>static/business/home/footer.jsp");
        $("aside").load("<%= basePath %>static/business/home/aside.jsp");
    })
</script>
</html>